/**
 * 聊天输入框组件
 */

import React from 'react';
import { Button, Input } from '@alifd/next';
import { INPUT_PLACEHOLDER } from '../constants';
import { inputAreaStyle, sendButtonStyle } from '../styles';

interface ChatInputProps {
  message: string;
  onMessageChange: (value: string) => void;
  onSend: () => void;
  onKeyPress: (e: React.KeyboardEvent) => void;
}

const ChatInput: React.FC<ChatInputProps> = ({
  message,
  onMessageChange,
  onSend,
  onKeyPress,
}) => {
  return (
    <div style={inputAreaStyle}>
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
        <div style={{ flex: 1 }}>
          <Input
            placeholder={INPUT_PLACEHOLDER}
            value={message}
            onChange={(value) => onMessageChange(String(value))}
            onKeyPress={onKeyPress}
            style={{ width: '100%' }}
          />
        </div>
        <Button
          type="primary"
          onClick={onSend}
          disabled={!message.trim()}
          style={sendButtonStyle}
        >
          发送
        </Button>
      </div>
    </div>
  );
};

export default ChatInput;
